<template>
  <Dialog :appDialog="appDialog">
    <el-scrollbar max-height="600px" style="padding-right: 20px">
      <el-form class="form_link" ref="formRef" :model="form" :rules="rules" label-width="100px">
        <!-- 标题 -->
        <el-form-item label="链接标题" prop="link_title">
          <el-input v-model="form.link_title" maxlength="12" show-word-limit placeholder="请输入链接标题"></el-input>
        </el-form-item>
        <!-- 链接地址 -->
        <el-form-item label="链接地址" prop="link_url">
          <el-input type="text" v-model="form.link_url" placeholder="请输入链接地址"></el-input>
        </el-form-item>
        <!-- 连接描述 -->
        <el-form-item label="链接描述" prop="link_desc">
          <el-input type="textarea" v-model="form.link_desc" :rows="2" maxlength="512" show-word-limit placeholder="请输入链接描述"></el-input>
        </el-form-item>
        <ZWUpload :cover="'link_share_image'" @submit="getFileList" ref="emptyData" />
      </el-form>
    </el-scrollbar>
  </Dialog>
</template>
<script setup lang="ts">
  import Dialog from '@/components/Dialog.vue'
  import { reactive, defineEmits, defineExpose, ref, watch } from 'vue'
  import ZWUpload from './components/ZWUpload.vue'
  import { getSetionId } from '@/utils/utils'
  import { quickLink } from '@/api/concreation'
  import { ElForm } from 'element-plus'
  import {validateHttp} from '@/utils/validate'
  const emptyData = ref(null)
  const formRef = ref<InstanceType<typeof ElForm>>()
  const emit = defineEmits(['getLocalLink'])
  // 分组ID
  const groupId = ref(0)
  const form = reactive({
    group_id: groupId.value,
    id: 0,
    link_title: '',
    link_url: '',
    link_desc: '',
    link_share_image: '',
    code: '',
    check: false
  })

  const rules = reactive({
    link_title: [
      {
        required: true,
        message: '链接标题不能为空',
        trigger: 'blur'
      }
    ],
    link_url: [
      {
        required: true,
        message: '链接地址不能为空',
        trigger: 'blur'
      },
      { validator: validateHttp, trigger: 'blur' }
    ],
    link_desc: [
      {
        required: true,
        message: '链接描述不能为空',
        trigger: 'blur'
      }
    ],
    link_share_image: [
      {
        required: true,
        message: '链接封面不能为空',
        trigger: 'change'
      }
    ]
  })
  const showDialog = () => {
    appDialog.visible = true
  }
  const cancelHandel = () => {
    appDialog.visible = false
    formRef.value.resetFields()
    form.link_title = ''
    form.link_url = ''
    form.link_desc = ''
    form.link_share_image = ''
    form.code = ''
    emptyData.value.uploadFileList = []
  }
  const submitHandel = () => {
    formRef.value.validate(async (valid: any) => {
      if (valid) {
        try {
          emit('getLocalLink', {
            type: 3,
            typeStr: 'link',
            data: [
              {
                is_local: true,
                title: form.link_title,
                content: form.link_desc,
                cover_image_url: form.link_share_image,
                code: form.code,
                link_url: form.link_url,
                link_desc: form.link_desc
              }
            ]
          })
          cancelHandel()
        } catch (e) {}
      }
    })
  }

  const appDialog = reactive({
    visible: false,
    title: '创建链接',
    width: '670px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '保存'
  })
  // 获取上传成功的文件
  const getFileList = (data: any) => {
    form.link_share_image = getSetionId('url', data)[0]
    form.code = getSetionId('code', data)[0]
  }

  watch(
    () => form.link_share_image,
    () => {
      formRef.value.validateField('link_share_image')
    }
  )
  defineExpose({
    showDialog,
    groupId
  })
</script>
<style lang="scss" scoped>
  .el-form.form_link {
    margin: 10px;
    .el-form-item{
      margin-bottom: 18px !important;
    }
  }
  .radio_list {
    &_item {
      &_icon {
        width: 14px;
        height: 14px;
        margin: -3px 0 0 6px;
        img {
          margin-top: 2px;
          width: 100%;
          height: 100%;
          vertical-align: top;
        }
      }
    }
    :deep .el-radio__label {
      display: flex;
      align-items: center;
    }
  }
  .ml2 {
    margin-left: 2px;
  }
  .mr10 {
    margin-right: 10px;
  }
  .agree_ment {
    display: flex;
    align-items: center;
  }
  :deep .el-scrollbar {
    height: 50%;
  }
</style>
